<style scoped>
  .input-group-head{
    height: 20px;
  }
  .input-label.focus{

  }
  .input-label{
    cursor: text;
    position: absolute;
    margin: 0 0 0 10px;
    padding: 11px 0;
    font-size: 16px;
    color: #777;
    transition: 150ms;
    transform: scale(1) translate(0, 10px);
  }
</style>
<template>
  <div @click.stop="_focus">
    <div class="input-group-head">
      <p class="input-label" :class="{'focus':status}">label</p>
    </div>
    <slot></slot>
    {{status}}
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
export default {
  components: {

  },

  props: [
    'ids'
  ],

  data () {
    return {
    }
  },
  mounted () {
  },
  computed: mapGetters({
    status: 'label',
  }),
  methods: {
    _focus () {
      this.$store.state.label= this.ids
    }
  }
}
</script>
